@import 'base';

$theme: dark;
$bg: $black;
$bg-inverse: $white !default;

$text-color: rgba($white, 0.9);
$text-color-inverse: $black;
$text-color-secondary: rgba($white, 0.65);

// Border color
$border-color-base: #585858; // base border outline a component
$border-color-split: hsl(0, 0, 15%); // split border inside a component
$border-color-inverse: black;

// Disabled states
$disabled-color: rgba(#fff, 0.25);
$disabled-bg: hsl(0, 0, 4%);
$disabled-color-dark: rgba(#fff, 0.35);

// Shadow
$shadow-color: rgba(0, 0, 0, 0.65);
$shadow-color-inverse: $white;
$shadow-1-up: 0 -2px 8px $shadow-color;
$shadow-1-down: 0 2px 8px $shadow-color;
$shadow-1-left: -2px 0 8px $shadow-color;
$shadow-1-right: 2px 0 8px $shadow-color;
$shadow-2: 0 4px 12px $shadow-color;
$box-shadow-base: $shadow-1-down;

// button
$btn-default-color: further($bg, 8);

// input
$input-bg: rgba(#000, 0.4) !default;
$input-bc: rgba(#fff, 0.4) !default;
$input-hover-bc: rgba(#fff, 0.6) !default;
$input-hover-bg: rgba(#000, 0.6) !default;
$input-addon-bg: further($input-bg, 6.5);
$input-placeholder-color: #a9a9a9;
$input-disabled-bg: rgba(#fff, 0.2);

// Tooltip
$tooltip-color: $text-color;
$tooltip-bg: #2b2b2b;

// popover
$popover-color: $text-color;
$popover-bg: $tooltip-bg;

// select
$select-listbox-bg: #202020;
$select-listbox-border: 2px solid #141414;
$select-option-bg: #fff;
$select-option-hover-bg: rgba(#fff, 0.1);
$select-option-selected-bg: further($primary-color, 2);

// switch
$switch-border-color: #cccccc;
$switch-bg: transparent;
$switch-checked-bg: $primary-color;

// rate
$rate-color: further($gray, 2);

// menu
$menu-bg: further($bg, 6.5);
$menu-item-hover-bg: further($bg, 8);

// message
$message-bg: $menu-bg;

// notification
$notification-bg: $message-bg;
$notification-desc-color: further($gray, 7.5);

// calendar
$calendar-bg: $menu-bg;
$calendar-disabled-bg: rgba($white, 0.05);

// tag
$tag-bg-opacity: 0.2;

// card
$card-bg: #1d1e1f;
$card-border-color: rgba(#fff, 0.08);

//table
$table-bg: #222222;
$table-border-color: $table-bg;
$table-th-bg: #212121;
$table-td-bg: #171717;

// scrollbar
$scrollbar-thumb-bg: rgba(#fff, 0.3);
$scrollbar-track-bg: rgba(#fff, 0.1);

// drawer
$drawer-bg: $notification-bg;
$drawer-border: 1px solid rgba(#fff, 0.06);

// progress
$progress-rail-color: #333333;

// skeleton
$skeleton-item-bg: rgba($white, 0.12);
$skeleton-item-ani-bg: linear-gradient(90deg, rgba($white, 0.1) 25%, rgba($white, 0.12) 37%, rgba($white, 0.1) 63%);

// tabs
$tabs-segment-bg: rgba($white, 0.1);
$tabs-segment-bar-bg: rgba($white, 0.1);
$tabs-card-bg: rgba($white, 0.1);
$tabs-card-active-bg: rgba($white, 0.05);
$tabs-border-color: $card-border-color;

// anhor
$anhor-rail-color: rgba(#fff, 0.2) !default;

@import './default';
